<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="back()">
				<image src="../../static/images/common/back.png" class="back-img"></image>
			</view>
			<view class="top-bar-center">
				<view class="title">
					详情
				</view>
			</view>
			<view class="top-bar-right">
				<view class="pice">

				</view>
			</view>
		</view>
		<view class="main">
			<view class="column heads">
				<view class="row head">
					<view class="title">
						
						头像
					</view>
					<view class="user-head">
						<image-cropper :src="tempFilePath" @confirm="confirm"  @cancel="cancel"></image-cropper>
						
						<image :src="user.profilePhoto" @tap="upload" class="user-img"></image>
						<!-- <image :src="user.imgUrl" class="user-img"></image> -->
					</view>
					<view class="more">
						
						<image src="../../static/images/userDetail/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row" @tap="modify('签名修改',user.intr,false)">
					<view class="title">
						签名
					</view>
					<view class="cont">
						{{user.intr}}
					</view>
					<view class="more">
						<image src="../../static/images/userDetail/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row">
					<view class="title">
						注册
					</view>
					<view class="cont">
						{{user.registerDate}}
					</view>
					<!-- <view class="more">
						<image src="../../static/images/userDetail/更多.png" mode="aspectFit"></image>
					</view> -->
				</view>
			</view>

			<view class="column">
				<view class="row" @tap="modify('昵称修改',user.nickname,false)">
					<view class="title" >
						昵称
					</view>
					<view class="cont">
						{{user.nickname}}
					</view>
					<view class="more">
						<image src="../../static/images/userDetail/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row">
					<view class="title">
						性别
					</view>
					<view class="cont">
						<picker @change="bindPickerChange" :value="user.gender" :range="array">
							<view class="uni-input">{{array[user.gender]}}</view>
						</picker>
					</view>
					<view class="more">
						<image src="../../static/images/userDetail/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row">
					<view class="title">
						生日
					</view>
					<view class="cont">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{user.birth}}</view>
						</picker>
					</view>
					<view class="more">
						<image src="../../static/images/userDetail/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row" @tap="modify('电话修改',user.tele,false)">
					<view class="title" >
						电话
					</view>
					<view class="cont">
						{{user.tele}}
					</view>
					<view class="more">
						<image src="../../static/images/userDetail/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row" @tap="modify('邮箱修改',user.email,false)">
					<view class="title" >
						邮箱
					</view>
					<view class="cont">
						{{user.email}}
					</view>
					<view class="more">
						<image src="../../static/images/userDetail/more.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<view class="column">
				<view class="row" @tap="modify('密码修改',user.name,true)">
					<view class="title">
						密码
					</view>
					<view class="cont">
						**********
					</view>
					<view class="more">
						<image src="../../static/images/userDetail/more.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="btn2" @tap="logout()">
				退出登录
			</view>
		</view>
		<view class="modify" :style="{bottom:-+addHeight+-1000+'px'}" :animation="animationData">
			<view class="modify-header">
				<view class="cancle" @tap="modify()">
					取消
				</view>
				<view class="title">
					{{modifyTitle}}
				</view>
				<view class="confirm" @tap="modifySubmit()">
					确定
				</view>
			</view>
			<view class="modify-main">
				<view  v-if="isPwd">
				<input type="password" v-model="pwd" class="modify-pwd" placeholder="请输入原密码" placeholder-style="color:#aaa;font-weight:400;" />
				<input type="password" v-model="newPwd" class="modify-pwd" placeholder="请输入新密码" placeholder-style="color:#aaa;font-weight:400;" />
				<input type="password" v-model="newPwd2" class="modify-pwd" placeholder="请确认新密码" placeholder-style="color:#aaa;font-weight:400;" />
				</view>
				<textarea v-else v-model="modifyTextArea" class="modify-content" />
			</view>
		</view>
	</view>
</template>

<script>
	import ImageCropper from "@/components/ling-imgcropper/ling-imgcropper.vue";
	import request from '../../api/request.js';
	export default {
		components: {
		    ImageCropper,
		  },
		data() {
			 const currentDate = this.getDate({
            format: true
        })
			return {
				user: {
				},
				array: ['男', '女', '未知'],
				index: 0,
				date: currentDate,
				tempFilePath: "",
				cropFilePath: "https://img1.baidu.com/it/u=2465206055,2583475887&fm=26&fmt=auto",
				datas:'修改的内容',
				pwd:'',
				newPwd:'',
				newPwd2:'',
				animationData: {},//动画,
				isModify:false,//动画开关
				addHeight:'',
				modifyTitle:'',
				modifyTextArea:'',
				isPwd:false,
			}
		},
	 	onShow() {
			//获取用户资料
			// let res = await request({
			// 	url: '/user/info/'+uni.getStorageSync("userInfo").username,
			// 	method: 'GET'
			// });
			// res = res[1].data
			//this.$store.dispatch('getUserInfo');
			
			// this.user  = res.data;
			//console.log(res)
		},
		onLoad() {
			this.user = this.$store.getters.getUser
			// this.user = uni.getStorageSync("userInfo")
			// console.log(this.user)
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onReady() {
			this.getElementStyle()
		},
		methods: {
			back() {
				uni.showToast({
											title: "不能再返回了!",
											duration: 1000,
											icon:"none"
				});
			},
			//性别选择器
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.user.gender = e.target.value
				this.updateUserInfo()
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				this.user.birth = e.target.value
				this.updateUserInfo()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			
			//头像裁剪
		 	upload() {
			      uni.chooseImage({
			        count: 1, //默认9
			        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			        sourceType: ["album","camera"], //从相册选择
			        success: (res) => {
			          this.tempFilePath = res.tempFilePaths.shift();
					  uni.uploadFile({
					  	url: this.serverUrl+"/fileUpload/image/"+uni.getStorageSync("userInfo").username,
					    filePath: this.tempFilePath,
					    name: "file",
					    fileType: "image",
					    //formData:{},传递参数
					    success: (uploadFileRes) => {
					      var backstr = uploadFileRes.data;
					  					  console.log("上传成功!",backstr)
											console.log(this.user)
					  						this.user.profilePhoto = backstr
											this.updateUserInfo()
					    },
					  			
					    fail(e) {
					      console.log("this is errormes " + e.message);
					    },
					  });
			        },
			      });
			    },
			    confirm(e) {
			      this.tempFilePath = "";
			      this.cropFilePath = e.detail.tempFilePath;
			     // // #ifdef APP-PLUS||MP
			      //除了H5端返回base64数据外，其他端都是返回临时地址，所以你要判断base64还是临时文件名，（用条件编译APP-PLUS||MP执行编译。）
			      //按我这里是先上传裁剪得来的临时文件地址然后得到临时文件名，
			      //待活你要判断是H5还是其他端传给后端类型参数让后端判断执行何种情况代码就OK了
				
			      
			
			   //   // #endif
			    },
			    cancel() {
			      console.log("canceled");
			      this.tempFilePath = "";
			    },
				getElementStyle(){
					const query = uni.createSelectorQuery().in(this);
					query.select('.modify').boundingClientRect(data => {
					  this.addHeight = data.height - 186
					}).exec();
				},
				//修改动画
				modify(title,info,isPwd){
					console.log(1)
					this.isPwd = isPwd
					this.modifyTextArea = info;
					this.modifyTitle = title
					this.isModify = !this.isModify
					var animation = uni.createAnimation({
					      duration: 300,
					        timingFunction: 'ease',
					    })
						if(this.isModify){
							 animation.bottom(0).step()
						}else{
							animation.bottom(-this.addHeight+-1000).step()
						}
						  this.animationData = animation.export()
					
				
					
				},
				//弹框修改确定
				modifySubmit(){
					if(this.modifyTitle == "签名修改"){
						//console.log(22)
						this.user.intr = this.modifyTextArea
					}
					else if(this.modifyTitle == "昵称修改"){
						this.user.nickname = this.modifyTextArea
					}
					else if(this.modifyTitle == "电话修改")
					{
						this.user.tele = this.modifyTextArea
					}
					else if(this.modifyTitle == "邮箱修改")
					{
						this.user.email = this.modifyTextArea
					}
					this.modify()
					this.updateUserInfo()
				},
				logout(){
					uni.navigateTo({
						url:"../login/login"
					})
					//uni.clearStorage();
					
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('dialogueList');
					uni.removeStorageSync('chatHistory');
					  
				},
				updateUserInfo(){
					//更新资料
					
					console.log(this.user)
					let res =  request({
						url: '/user/update',
						data: {
							username:this.user.username,
							profilePhoto:this.user.profilePhoto,
							nickname:this.user.nickname,
							email:this.user.email,
							intr:this.user.intr,
							gender:this.user.gender,
							birth:this.user.birth,
							tele:this.user.tele
						},
						method: 'POST',
					 success: (res) => {
						   this.$store.dispatch('getUserInfo');
						   this.user = this.$store.getters.getUser
						}
					});
					uni.showToast({
												title: "修改成功!",
												duration: 1000
					});
				}

		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";

	.top-bar {
		background-color: rgba(255, 255, 255, 0.96);
		border-bottom: 1px solid $uni-border-color;
		.top-bar-left{
			float: left;
			padding-left: 32rpx;
			 // background-color: #eee;
			width: 88rpx;
			height: 88rpx;
			.back-img{
				margin-top: 21rpx;
				width: 46rpx;
				height: 46rpx;
			}
		}
		// .back-img{
		// 	height: 100rpx;
		// 	width: 100rpx;
		// }
		.title {
			margin-top: env(safe-area-inset-top);
			font-size: 35rpx;
			font-family: PingFangSC-Regular;
			// padding-top: 20rpx;
			line-height: 88rpx;
		}
	}

	.main {
		padding-top: 118rpx;
		display: flex;
		flex-direction: column;

		.column {
			display: flex;
			flex-direction: column;
			padding-top: 12rpx;
			width: 100%;
			border-bottom: 1px solid $uni-border-color;

			.row {
				display: flex;
				flex-direction: row;
			}

			.title {
				flex: none;
				padding: 0 $uni-spacing-col-base;
				font-family: PingFangSC-Regular;
				font-size: 32rpx;
				color: #272832;
				line-height: 112rpx;
			}

			.head {
				height: 148rpx;
				display: flex;
				align-items: center;

			}

			.user-img {
				width: $uni-img-size-lg;
				height: $uni-img-size-lg;
				border-radius: $uni-border-radius-base;
			}

			.user-head {
				flex: auto;
			}

			.cont {
				flex: auto;
				//display: flex;
				align-items: center;
				// padding-left: $uni-spacing-col-base;
				font-family: PingFangSC-Regular;
				font-size: 32rpx;
				color: $uni-text-color-grey;
				line-height: 112rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.more {
				flex: none;
				height: 112rpx;
				align-items: center;
				display: flex;
				padding-right: 20rpx;

				image {
					width: 80rpx;
					height: 38rpx;
				}

			}
		}

		.btn2 {
			margin-top: 160rpx;
			text-align: center;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FF5D5B;
			line-height: 88rpx;
		}
	}
	/* 修改弹框 */
	.modify{
		position: fixed;
		z-index: 1002;
		// top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: #fff;
		
		.modify-header{
			width: 100%;
			height: 88rpx;
			padding-top: var(--status-bar-height);
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px solid $uni-border-color;
			
			.cancle{
				padding-left: 32rpx;
				font-family: PingFangSC-Regular;
				font-size: 32rpx;
				color: #272832;
				line-height: 88rpx;
			}
			.title{
				flex: auto;
				text-align: center;
				font-family: PingFangSC-Regular;
				font-size: 40rpx;
				color: #272832;
				line-height: 88rpx;
			}
			.confirm{
				padding-right: 32rpx;
				font-family: PingFangSC-Regular;
				font-size: 32rpx;
				color: #4AAAFF;;
				line-height: 88rpx;
			}
		}
		.modify-main{
			display: flex;
			padding:  $uni-spacing-col-base;
			flex-direction: column;
			.modify-pwd{
				font-family: PingFangSC-Regular;
				padding: 0 20rpx;
				box-sizing: border-box;
				flex: auto;
				width: 100%;
				background: #F3F4F6;
				border-radius: 20rpx;
				height: 88rpx;
				margin-bottom:  $uni-spacing-col-base;
				font-size: 32rpx;
				color: #272832;
				line-height: 88rpx;
			}
			.modify-content{
				padding: 16rpx 20rpx;
				font-family: PingFangSC-Regular;
				box-sizing: border-box;
				flex: auto;
				width: 100%;
				height: 386rpx;
				background: #F3F4F6;
				border-radius: 20rpx;
				
				font-size: 32rpx;
				color: #272832;
				line-height: 44rpx;
				
			}
		}
	}
</style>
